<script lang="ts" setup>
import Color from 'color'
import { Button } from 'vant'

const props = withDefaults(defineProps<{
  action: () => void
  icon?: string
  title: string
  color?: string
  textColor?: string
  disable?: boolean
}>(), {
  color: 'dodgerblue',
  textColor: 'white',
  disable: false,
})

function onClick() {
  if (!props.disable) {
    props.action()
  }
}

const bgc = computed(() => {
  if (!props.disable) {
    return props.color
  }
  else {
    const c1 = Color(props.color)
    return c1.lighten(0.6).hex()
  }
})
</script>

<template>
  <Button :style="{ backgroundColor: bgc, color: textColor }" mb0 paper flex flex-1 items-center justify-center p2 not-last-mr2 @click="onClick">
    <font-awesome-icon v-if="icon" :icon="icon" mr2 />
    <span>{{ title }}</span>
  </Button>
</template>

<style>
</style>
